﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>轨迹视角动画暂停与继续</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        ul li {
            list-style: none;
        }

        .drawing-panel {
            z-index: 999;
            position: fixed;
            /*bottom: 3.5rem;*/
            height: 75px;
            margin-left: 3rem;
            padding: 1rem 1rem;
            border-radius: .25rem;
            background-color: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }

        .btn {
            width: 90px;
            height: 40px;
            float: left;
            background-color: #fff;
            color: rgba(27, 142, 236, 1);
            font-size: 14px;
            border: 1px solid rgba(27, 142, 236, 1);
            border-radius: 5px;
            margin: 0 5px;
            text-align: center;
            line-height: 30px;
        }

            .btn:hover {
                background-color: rgba(27, 142, 236, 0.8);
                color: #fff;
            }
    </style>
    <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=E6fLfoZvafshmZ0srkPPo9Iu2f8xOZHa"></script>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
    @*<select id="select1" name="select1" onchange="select2()">
        </select>*@

    <div class="drawing-panel" style="z-index: 99;height:70px">
        <abp-button class="btn" onclick="pauseAni()">暂停</abp-button>
        <abp-button class="btn" onclick="continueAni()">继续</abp-button>
        <form class="layui-form" action="" style="padding:20px">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="demo2">
                </div>
            </div>
        </form>
    </div>
    <div id="container" style="width:1700px;height:1000px;"></div>
</body>
</html>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="../layui/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>

<script>
    initbmap();
    function initbmap()
    {
        path = [];
        bmap = new BMapGL.Map("container");
        bmap.centerAndZoom(new BMapGL.Point(116.403766, 39.913733), 17);
        bmap.enableScrollWheelZoom(true);
        point = [];
    }

    $.ajax({
        url:"/BaiduMap/GetLine",
        type:"get",
        dataType:"json",
        async:false,
        success:function(obj){
            $(obj).each(function(){
                $("#select1").append(
                    "<option value='"+this.id+"'>"+this.ldetail+"-"+this.ldestination+"</option>"
                )
            })
        }
    })

    function select2 (id){
       initbmap();
       refreshdata();
       pauseAni();
       $.ajax({
            url:"/BaiduMap/GetL?Id="+id,
            type:"get",
            dataType:"json",
            async: false,
            success:function(obj){
                for(var i=0;i<obj.length;i++){
                    path.push({
                        "lng": obj[i].longitude,    //精度
                        "lat": obj[i].latitude      //纬度
                    })
                }
                refreshdata();
                start();
            }
       })
    }

    refreshdata();
    start();
    function refreshdata()
    {
        bmap = new BMapGL.Map("container");
        bmap.centerAndZoom(new BMapGL.Point(116.403766, 39.913733), 17);
        bmap.enableScrollWheelZoom(true);
        point=[]
        for (var i = 0; i < path.length; i++) {
            point.push(new BMapGL.Point(path[i].lng, path[i].lat));
        }
        pl = new BMapGL.Polyline(point);
        trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
            overallView: true,
            tilt: 30,
            duration: 20000,
            delay: 300
        });
        path=[];
    }

    function start()
    {
        trackAni.start();
    }

    //暂停
    function pauseAni() {
        trackAni.pause();
    }

    //继续
    function continueAni() {
        trackAni.continue();
    }

    //单选下拉框
    layui.use(['table', 'form', 'tableSelect'], function () {
        var $ = layui.jquery,
            table = layui.table,
            form = layui.form,
            tableSelect = layui.tableSelect;
        tableSelect.render({
            elem: '#demo2',
            checkedKey: 'id',
            table: {
                url: '/Line/GetFieldList',
                page: true, //开启分页
                limit: 6,
                limits: [3, 6, 9, 12],
                cols: [[
                    { type: 'radio' },
                    { field: 'id', title: 'Id', width: 70, align:'center' },
                    { field: 'ldetail', title: '起点', align:'center' },
                    { field: 'ldestination', title: '终点', align:'center' }
                ]]
            },
            done: function (elem, data) {
                var NEWJSON = []
                layui.each(data.data, function (index, item) {
                    $("#demo2").val(item.ldetail+"-"+item.ldestination)
                    select2(item.id)
                })
            }
        })
    });
</script>